<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 300px;
				margin: 100px auto 0;
			}
			
			table {
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
				width: 300px;
			}
			
			th,
			td {
				border: 1px solid #d0d0d0;
				color: #404060;
				padding: 10px;
			}
			
			th {
				background-color: #09c;
				font: bold 16px "微软雅黑";
				color: #fff;
			}
			
			td {
				font: 14px "微软雅黑";
			}
			
			tbody tr {
				background-color: #f0f0f0;
			}
			
			tbody tr:hover {
				cursor: pointer;
				background-color: #fafafa;
			}
		</style>

		<script>
			window.onload = function() {
				var topInp = document.getElementById("top");
				var tbody = document.getElementById("tbody");
				var botInpArr = tbody.getElementsByTagName("input");
				//需求一：当topinp选中，下面全部选中，topinp不选下面全不选
				topInp.onclick = function() {
					if (topInp.checked) {
						for (var i = 0; i < botInpArr.length; i++) {
							botInpArr[i].checked = true;
						}
					} else {
						
							botInpArr[i].checked = false;
						}
					}
				}
				//需求二：下面四个都选中使topinp选中，否则不
				for (var i = 0; i < botInpArr.length; i++) {
					botInpArr[i].onclick = function() {
						var ok = true;
						for (var j = 0; j < botInpArr.length; j++) {
							if (botInpArr[j].checked == false) {
								ok = false;
							}
						}
						topInp.checked = ok;
					}
					
				}
			}
		</script>

	</head>

	<body>

		<table class="wrap">

			<tr>
				<th>
					<input type="checkbox" id="top" />
				</th>
				<th>菜名</th>
				<th>饭店</th>
			</tr>

			<tbody id="tbody">
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>地三鲜</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>西红柿鸡蛋</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>醋溜土豆丝</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>萝卜干炒黄豆儿</td>
					<td>田老师</td>
				</tr>
			</tbody>
		</table>

	</body>

</html>